import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'
import { useArgs } from '@storybook/client-api'

import SegmentControl from '@baserow/modules/core/components/SegmentControl'

<Meta
    title="Baserow/Segment Control"
    component={SegmentControl}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        initialActiveIndex: {
            control: {
                type: 'number',
            },
            defaultValue: 0,
        },
        transparent: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        iconsOnly: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        size: {
            control: {
                type: 'select',
                options: ['regular', 'small', 'large'],
            },
            defaultValue: 'regular',
        },
        type: {
            control: {
                type: 'select',
                options: ['regular', 'rounded'],
            },
            defaultValue: 'regular',
        },
    }}
/>

# SegmentControl

The SegmentControl component is used to display a list of segments that can be selected.

export const Template = (args, { argTypes, updateArgs }) => ({
    methods: {
        action,
    },
    components: { SegmentControl },
    props: Object.keys(argTypes),
    template: `<SegmentControl @update:activeIndex="segmentUpdate" v-bind="$props"></SegmentControl>`,
    methods: {
        action,
        segmentUpdate(activeIndex) {
            action('update:activeIndex')(activeIndex)
        },
    },
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?mode=dev',
}

<Canvas>
    <Story
        name="Text"
        args={{
            segments: [
                { icon: 'iconoir-db', label: 'One' },
                {
                    icon: 'iconoir-db',
                    label: 'This is a very long text lorem ipsum dolor sit amet tatatum temporis',
                },
                { icon: 'iconoir-db', label: 'Three' },
            ],
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Icons only"
        args={{
            segments: [
                { icon: 'iconoir-apple-imac-2021' },
                { icon: 'baserow-icon-tablet' },
                { icon: 'baserow-icon-smartphone' },
            ],
            iconsOnly: true,
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<SegmentControl :activeIndex.sync="activeIndex" :segments='["One","Two","Three"]' :initialActiveIndex="2"></SegmentControl>
```

## Props

<Props of={SegmentControl} />
